<template>
    <div class="app-container">
      <div class="mapDiv" v-loading="mapLoading">
        <div v-if="layerSelectViable" class="liduJiBie">
          <el-select v-model="layerName" placeholder="请选择烈度图层" @change="chooseProvince" clearable value-key="geom">
            <el-option v-for="item in liduJiBieData" :key="item.geom" :label="item.intensity1" :value="item">
            </el-option>
          </el-select>
          <el-select v-if="layerTypeVisable" v-model="layerType" placeholder="请选择图层评估方式" @change="chooseProvince1" clearable value-key="geom">
            <el-option v-for="item in layerTypeListAll" :key="item.name" :label="item.name" :value="item">
            </el-option>
          </el-select>
        </div>
        <!--地图-->
        <SimdIndexMap v-if="completeRefreshData==true"
                     @getMap="getMap"
                     @closePingGu="closePingGu"
                     @outAndInterRing="outAndInterRing"
                      :shpLegendList="shpDataForm.shpLegendList"
                      :shpDataList="shpDataForm.shpDataList"
                      :taskDataList="allDataList"
                      :sampleDataList="allDataList2"
                      :drawGeom="drawGeom"
                      :option="option"
                      :layerTypeMap="layerTypeMap"
                      :samPoiHouDataList="samPoiHouDataList"
                      :instrumentIntensityList="instrumentIntensityList"
                      :aftershockList="aftershockList"
                      :fastSeismicInfluenceList="fastSeismicInfluenceList"
                      :dzLonLat="addForm.dzLonLat"
        ></SimdIndexMap>
        <!--工具条控件-->
        <ControlToolBar v-if="completeRefreshData==true"
                        :map="map" :pageType="pageType" :mapDrawType="mapDrawType"
                        :showFileUploadBool="showFileUploadBool" :clearSelectFeatureBool="clearSelectFeatureBool"
                        :outAndInterRingData="outAndInterRingData" :showButtonType="showButtonType"
                        @getAllDrawGeom="getAllDrawGeom" @seismicInfluenceUpload="seismicInfluenceUpload"
                        @createTaskArea="createTaskArea" @createSamplePoint="createSamplePoint"
                        @openLayerSelect="openLayerSelect" @showRemark="showRemark" @showPrintImage="showPrintImage"
                        @showDrawSeismicInfluence="showDrawSeismicInfluence" @getDrawInfluence="getDrawInfluence" @deleteDrawInfluence="deleteDrawInfluence"
        ></ControlToolBar>
        <!--超图图层显示-->
        <SuperMapLayer v-if="completeRefreshData==true"
                       :map="map" :layerDataTypeList="layerDataTypeList"
                       :resetClearAllBool="resetClearAllBool"
                       :clickLonLat="clickLonLat"
                       :legendInfo="legendInfo"
        ></SuperMapLayer>
        <!--文件上传组件-->
        <FileUpload :showFileUploadBool="showFileUploadBool" :code="typeCode"
                    @closeUpload="closeUpload" @sureUploadFile="uploadFile"
        ></FileUpload>
        <!--地震烈度图范围图层图例-->
        <div class="new-legendDiv">
          <div style="text-align: center;">
            <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">图例</span>
          </div>
          <div style="text-align: center;height: 20px;">
            <span style="font-size: 14px;font-weight: bold;color: rgb(16, 124, 229);">地震烈度图范围烈度</span>
          </div>
          <template v-for="item in shpDataForm.shpLegendList">
            <div v-show="item.show">
              <div><div style="border-color:rgb(152,152,152);" :style="{'background-color': item.color}" class="new-legendDiv-polygon"></div></div>
              <span>{{ item.fullName }}</span>
            </div>
          </template>
          <div>
            <div><div style="border:1px solid red;" :style="{'background-color': 'yellow'}" class="new-legendDiv-point"></div></div>
            <span>震中</span>
          </div>
          <div v-show="isCheckBox2">
            <div><div style="border-color:rgb(152,152,152);" :style="{'background-color': 'blue'}" class="new-legendDiv-point"></div></div>
            <span>仪器地震烈度</span>
          </div>
          <div v-show="isCheckBox3">
            <div><div style="border-color:rgb(152,152,152);" :style="{'background-color': 'blue'}" class="new-legendDiv-point"></div></div>
            <span>抽样点烈度</span>
          </div>
          <div v-show="isCheckBox6">
            <div><div style="border-color:rgb(152,152,152);" :style="{'background-color': 'green'}" class="new-legendDiv-point"></div></div>
            <span>余震序列</span>
          </div>
        </div>
        <el-collapse class="currentEventDiv" v-model="activeNames">
          <el-collapse-item title="图层" name="1">
            <div>
              <p class="title">当前地震事件:
                  <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
                  <span v-else>请在地震事件管理中设置当前地震事件</span>
              </p>
            <div class="new-checkBoxDiv">
            <!-- <p><el-checkbox v-model="isCheckBox1" label="快速影响场" size="large" @change="checkBoxEvent1" />
                <el-button @click="showFastSiVersionDialog" style="margin-left:10px;">选择版本</el-button>
              </p>-->
              <!--<p><el-checkbox v-model="isCheckBox3" label="抽样点烈度" size="large" @change="checkBoxEvent3" /></p>
              <p><el-checkbox v-model="isCheckBox4" label="补充调查抽样点烈度" size="large" @change="checkBoxEvent4" /></p>
              <p><el-checkbox v-model="isCheckBox2" label="仪器烈度" size="large" @change="checkBoxEvent2" /></p>
              <p><el-checkbox v-model="isCheckBox5" label="断层分布" size="large" @change="checkBoxEvent5" /></p>
              <p><el-checkbox v-model="isCheckBox6" label="余震序列" size="large" @change="checkBoxEvent6" /></p>
              <p><el-checkbox v-model="isCheckBox7" label="房屋基础信息" size="large" @change="checkBoxEvent7" /></p>
              <p><el-checkbox v-model="isCheckBox8" label="DEM数据" size="large" @change="checkBoxEvent8" /></p>
              <p><el-checkbox v-model="isCheckBox9" label="遥感信息" size="large" @change="checkBoxEvent9" /></p>-->
              <p>
                <el-checkbox v-model="isCheckBox3" label="抽样点烈度" size="large" @change="checkBoxEvent3" />
                <!-- <el-checkbox v-model="isCheckBox4" label="补充调查抽样点烈度" size="large" @change="checkBoxEvent4" /> -->
                <el-checkbox v-model="isCheckBox2" label="仪器烈度" size="large" @change="checkBoxEvent2" />
                <el-checkbox v-model="isCheckBox5" label="断层分布" size="large" @change="checkBoxEvent5" />
                <el-checkbox v-model="isCheckBox6" label="余震序列" size="large" @change="checkBoxEvent6" />
                <el-checkbox v-model="isCheckBox7" label="房屋基础信息" size="large" @change="checkBoxEvent7" />
                <el-checkbox v-model="isCheckBox8" label="DEM数据" size="large" @change="checkBoxEvent8" />
                <el-checkbox v-model="isCheckBox9" label="遥感信息" size="large" @change="checkBoxEvent9" />
                <el-checkbox v-model="isCheckBox10" label="地震烈度图" size="large" />
                <el-button type="primary" icon="Download" @click="exportFile" style="margin-left:30px;">导出</el-button>
              </p>
            </div>
          </div>
          </el-collapse-item>
        </el-collapse>
        <el-dialog v-model="aftershockSequenceBool" top="50vh" title="余震序列条件选择" width="456px" append-to-body @close="aftershockSequenceFun">
          <div style="padding:10px;">
            <el-date-picker
              v-model="dataRange"
              type="datetime"
              placeholder="选择起始时间"
              format="YYYY-MM-DD HH:MM"
              value-format="YYYY-MM-DD HH:MM:ss"
            />
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitAftershockSequence">确 定</el-button>
            </div>
          </template>
        </el-dialog>
        <!--快速生成地震影响场版本信息列表-->
        <el-dialog v-model="showFastSiVersionTableBool" title="快速影响场版本选择" width="900px" append-to-body @close="showFastSiVersionTableBool=false">
          <div style="padding:10px;">
            <el-table v-loading="tableLoading" :data="fastSiVersionList" stripe>
              <el-table-column label="单选" width="55px">
                <template #default="scope">
                  <el-radio :label="scope.row.fvId" v-model="selectRadio"
                            @click.native.stop.prevent="getCurrentRow(scope.row)">&nbsp;</el-radio>
                </template>
              </el-table-column>
              <el-table-column label="地震影响场图编号" align="center" prop="versionCode" width="200" />
              <el-table-column label="长轴方向" align="center" prop="angle" width="100" />
              <el-table-column label="生成人" align="center" prop="createUserName" width="100" />
              <el-table-column label="生成时间" align="center" prop="createTime" width="100" />
              <el-table-column label="中心点经度" align="center" prop="longitude" width="100" />
              <el-table-column label="中心点纬度" align="center" prop="latitude" width="100" />
              <el-table-column label="震级" align="center" prop="earthquakeLevel" width="100" />
            </el-table>
            <pagination v-show="total3 > 0" :total="total3" v-model:page="queryParams3.page" v-model:limit="queryParams3.rows"
                        @pagination="getFastSiVersionList" />
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitVersionSelect">确 定</el-button>
            </div>
          </template>
        </el-dialog>

        <!--版本选择面板-->
        <VersionDialog v-if="openVersionDialog"
                       :open="openVersionDialog" :type="versionDialogType"
                       @closeDialog="closeVersionDialog" @selectVersionData="selectVersionData"
        ></VersionDialog>

        <!--烈度说明-->
        <el-dialog v-model="showRemarkBool" title="烈度说明" width="900px" append-to-body @close="closeRemark">
          <div v-show="totalAreaInfo!=''" style="padding:10px;">
            {{ totalAreaInfo }}
          </div>
          <div style="padding:10px;">
            <el-input type="textarea" :rows="20" v-model="remark"></el-input>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="saveRemark">保 存</el-button>
            </div>
          </template>
        </el-dialog>

        <!--生成图件-->
        <el-dialog v-model="showPrintImageBool" title="生成图件" width="600px" append-to-body @close="closePrintImage">
          <el-form :model="chartForm" ref="chartFormRef" :inline="true" :rules="chartFormRules" class="chartForm"
                   label-width="80px" v-loading="chartLoading">
            <el-row>
              <el-col :span="24">
                <el-form-item label="制图单位" prop="unit">
                  <el-input style="width:450px" v-model="chartForm.unit" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="活断层数据版本" label-width="120px" prop="faultVersion" style="margin-bottom: 15px;">
                  <span v-if="chartForm.faultVersion" class="new-settingDiv-span" @click="showSelectDialog">{{chartForm.faultVersion}}</span>
                  <el-button v-else @click="showSelectDialog">选择</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <template v-if="chartForm.mapManagement!=null">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="地震事件" prop="mapName">
                    <el-input style="width: 100%;" v-model="chartForm.mapManagement.xsemName" placeholder="请输入地震事件名称" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--<el-row>
                <el-col :span="24">
                  <el-form-item label="图件名称" prop="mapName">
                    <el-input style="width: 100%;" v-model="chartForm.mapManagement.mapName" placeholder="请输入图件名称" />
                  </el-form-item>
                </el-col>
              </el-row>-->
              <el-row>
                <el-col>
                  <el-form-item label="图片" prop="picture">
                    <ImageUpload ref="reportImgUpload" :fileSize="100" :limit="1" downloadUrl="downLoadImageFile"
                                  v-model="chartForm.attachList" :show-file-list="false" />
                  </el-form-item>
                </el-col>
              </el-row>
              <!--<el-row>
                <el-col>
                  <el-form-item label="图件描述" prop="mapDescription">
                    <el-input v-model="chartForm.mapManagement.mapDescription" type="textarea"
                              maxlength="1000" show-word-limit :autosize="{ minRows: 4, maxRows: 5 }"
                              placeholder="请输入图件描述" />
                  </el-form-item>
                </el-col>
              </el-row>-->
            </template>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="savePrintImage" v-if="chartForm.mapManagement==null">生成图件</el-button>
              <el-button type="primary" @click="savePrintImage" v-else>重新生成图件</el-button>
              <el-button type="primary" @click="uploadImg" v-show="chartForm.mapManagement!=null">下载图件</el-button>
<!--              <el-button type="primary" @click="updateImageInfo" v-show="chartForm.mapManagement!=null">确 定</el-button>-->
              <el-button @click="closePrintImage">关 闭</el-button>
            </div>
          </template>
        </el-dialog>
      
        <!--制图：地震烈度图绘制-->
        <el-dialog v-model="showDrawSeismicInfluenceBool" title="地震烈度图绘制" width="770px" append-to-body @close="showDrawSeismicInfluence(false)">
          <div style="padding:10px;">
            <el-radio-group v-model="drawInfluenceIntensity">
              <el-radio label="12">Ⅻ度（12度）等震线</el-radio>
              <el-radio label="11">Ⅺ度（11度）等震线</el-radio>
              <el-radio label="10">Ⅹ度（10度）等震线</el-radio>
              <el-radio label="9">Ⅸ度（9度）等震线</el-radio>
              <el-radio label="8">Ⅷ度（8度）等震线</el-radio>
              <el-radio label="7">Ⅶ度（7度）等震线</el-radio>
              <el-radio label="6">Ⅵ度（6度）等震线</el-radio>
            </el-radio-group>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="startDrawSeismicInfluence">绘 制</el-button>
              <el-button type="primary" @click="countAllDrawSeismicInfluenceGeomRefresh">计算发布</el-button>
              <el-button type="primary" @click="deleteDrawSeismicInfluenceByXsemIdIntensity">删除所选烈度</el-button>
              <el-button type="primary" @click="deleteDrawSeismicInfluenceByXsemId">删除全部烈度</el-button>
              <el-button type="primary" @click="showDrawSeismicInfluence(false)">关 闭</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
</template>
  
<script setup name="seismicIntensityMapDraw">
//地图
import SimdIndexMap from '@/map/seismicIntensityMap/seismicIntensityMapDraw/indexMap.vue';
import ControlToolBar from '@/map/seismicIntensityMap/seismicIntensityMapDraw/controlToolBar/map.vue';
import SuperMapLayer from '@/map/components/superMapLayer/index.vue';
import FileUpload from '@/map/components/fileUpload/index.vue';
import VersionDialog from '@/views/seismicIntensityMap/seismicIntensityMapDraw/versionDialog.vue';
import ImageUpload from '@/views/seismicIntensityMap/seismicIntensityMapDraw/ImageUpload/index.vue';
import { getDrawSeismicInfluenceList,getSurTaskManageList,deleteDrawSeismicInfluence,deleteDrawSeismicInfluenceById,deleteDrawSeismicInfluenceByIntensity,
  saveDrawSeismicInfluenceByIntensity,countAllDrawSeismicInfluenceGeom } from '@/api/map/shpFile';
import { getDict } from "@/api/system/dict";
import useEventStore from "@/store/modules/event";
import { MoreFilled } from '@element-plus/icons-vue'
import { getAllTaskDataList,getAllSamPoiDataList,getAllList, getAllList1, getAllList2, getDetail, getDetail1, updateData, del, getTaskCreateInfo,saveData,getPointCreateInfo2,getDetail2,saveData2,updateData2,del2 } from "@/api/fieldWork/taskManage.js"
import { getFastSiVersionListByXsemId,getFastSeismicInfluenceListByFvId } from "@/api/fastDisasterAnalysis/fastSeismicInfluence/intensity";
import { getSamPoiHouDataByXsemIdAndType } from "@/api/disasterArea/disasterArea";
import { updateRemark,supergraph,getByLabel,updateMapManagement,getAftershockSequenceData } from "@/api/seismicIntensityMap/seismicIntensityMapDraw/version";
import { getDetail as getSeismicEventsDetail } from "@/api/comprehensiveInformation/seismicEvents.js"
import { ref } from 'vue';
import { saveAs } from 'file-saver'
import { ElMessageBox, ElLoading } from 'element-plus'
import * as turf from "@turf/turf";
import { getInstrumentIntensityList } from '@/api/disasterManage/instrumentIntensity';

const currentEvent = computed(() => useEventStore().currentEvent);
const { proxy } = getCurrentInstance();
const allDataList = ref([]);//全部任务列表
const allDataList2 = ref([]);//全部抽样点列表
const dataList = ref([]);
const dataList1 = ref([]);
const dataList2 = ref([]);
const ids = ref();
const loading = ref(false);
const loading2 = ref(false);
const single = ref(true);
const multiple = ref(true);
const isTaskList = ref(false);
const isSamplPointList = ref(false);
const open = ref(false);
const open1 = ref(false);
const open2 = ref(false);
const total = ref(0);
const total1 = ref(0);
const total2 = ref(0);
const total3 = ref(0);
const title = ref('新建任务')
const title2 = ref('新建抽样点')
const title3 = ref('快速影响场选择版本')
const openGroup = ref(false);
const groupName = ref(false);
const groupId = ref(false);
const activeName = ref('first');
const isView = ref(false);
const isView2 = ref(false);
const liduJiBieData = ref([])
const layerName = ref('')
const layerType = ref('')
const layerTypeVisable = ref(false)
// const currentEvent = computed(() => useEventStore().currentEvent);
//多选数据
const isCheckBox1 = ref(false);//快速影响场
const isCheckBox2 = ref(false);//仪器烈度
const isCheckBox3 = ref(false);//调查数据拟定烈度
// const isCheckBox4 = ref(false);//补充调查数据拟定烈度
const isCheckBox5 = ref(false);//断层分布
const isCheckBox6 = ref(false);//余震序列
const isCheckBox7 = ref(false);//房屋基础信息
const isCheckBox8 = ref(false);//DEM数据
const isCheckBox9 = ref(false);//遥感信息
const isCheckBox10 = ref(false);//地震烈度图
const showFastSiVersionTableBool = ref(false);//是否显示快速生成影响场版本选择面板
const aftershockSequenceBool = ref(false);//余震序列条件选择
const dataRange = ref('')
const tableLoading = ref(false);
const fastSiVersionList = ref([]);
const activeNames = ref(['1'])

const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
    },
    queryParams1: {
        page: 1,
        rows: 10,
    },
    queryParams2: {
        page: 1,
        rows: 10,
    },
    queryParams3: {//快速影响场查询
      page: 1,
      rows: 10,
    },
    form: {},
    form2: {},
    formGroup: {},
    rules: {
        taskName: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
        evaluationSubareaName: [{ required: true, message: "评估子区名称不能为空", trigger: "blur" }],
        evaluationSubareaType: [{ required: true, message: "评估子区类别不能为空", trigger: "change" }],
        // groupName: [{ required: false, message: "承担小组不能为空", trigger: "change" }],
        evaluationSubareaRange: [{ required: true, message: "任务区域不能为空", trigger: "change" }],
    },
    rules2: {
      samplingPointName: [{ required: true, message: "抽样点名称不能为空", trigger: "blur" }],
      address: [{ required: true, message: "抽样点详细位置不能为空", trigger: "blur" }],
      longitude: [{ required: true, message: "经度不能为空", trigger: "change" }],
      latitude: [{ required: true, message: "纬度不能为空", trigger: "change" }],
    },
    shpDataForm:{//导入地震烈度图范围空间数据
      shpDataList:[],//地震烈度图范围空间数据
      dataFileIds:"",//shp文件ID,
      shpLegendList:[
        {fullName:"Ⅴ度（5度）",name:"Ⅴ",value:"5",color:"rgba(255,220,220,0.8)",show:false},
        {fullName:"Ⅵ度（6度）",name:"Ⅵ",value:"6",color:"rgba(255,190,190,0.8)",show:false},
        {fullName:"Ⅶ度（7度）",name:"Ⅶ",value:"7",color:"rgba(255,127,127,0.8)",show:false},
        {fullName:"Ⅷ度（8度）",name:"Ⅷ",value:"8",color:"rgba(200,40,40,0.8)",show:false},
        {fullName:"Ⅸ度（9度）",name:"Ⅸ",value:"9",color:"rgba(168,0,0,0.8)",show:false},
        {fullName:"Ⅹ度（10度）",name:"Ⅹ",value:"10",color:"rgba(140,0,0,0.8)",show:false},
        {fullName:"Ⅺ度（11度）",name:"Ⅺ",value:"11",color:"rgba(105,0,0,0.8)",show:false},
        {fullName:"Ⅻ度（12度）",name:"Ⅻ",value:"12",color:"rgba(80,0,0,0.8)",show:false},
      ],//地震烈度图范围图例列表
    },
    taskDataForm:{//任务信息
      geom:"",//当前选择的任务空间数据
      xstmId:"",//当前选择的任务ID，ID为空则新建任务
    },
    sampleDataForm:{//抽样点信息
      id:"",//当前选择的抽样点ID，ID为空则新建抽样点
      longitude:"",//当前选择的抽样点经度
      latitude:"",//当前选择的抽样点纬度
      geom:"",//当前选择的抽样点空间数据
      xstmId:"",//当前选择的抽样点所在的任务ID
    },
    //图层数据类别code和url列表
    layerDataTypeList:[
      {
        //断层数据
        level2DataType:"hdc",//数据类别二级code
        level3DataType:"dc",//数据类别三级code
        versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
        show:false,//是否显示
        isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
        tifFileName:null,//tif文件名称
      },
      {
        //DEM高程数据
        level2DataType:"demgc",//数据类别二级code
        level3DataType:"demgcsj",//数据类别三级code
        versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
        show:false,//是否显示
        isYw:false,//是否为业务系统数据，true业务系统，false基础数据系统
        tifFileName:null,//tif文件名称
      },
      {
        //房屋基础信息13类数据
        level2DataType:"fwjcxx",//数据类别二级code
        level3DataType:"fwjcxx13",//数据类别三级code
        versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
        show:false,//是否显示
        isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
        tifFileName:null,//tif文件名称
      },
      {
        //设定地震震中
        level2DataType:"sddzzz",//数据类别二级code
        level3DataType:"sddzzzsj",//数据类别三级code
        versionCode:null,//版本号："全部"则展示整个图层，null无版本号不展示
        show:false,//是否显示
        isYw:true,//是否为业务系统数据，true业务系统，false基础数据系统
        tifFileName:null,//tif文件名称
      },
    ],
    //生成图件
    chartLoading: false,
    chartForm: {
      unit: '',//制图单位
      attachList:[],//图件列表
      mapManagement:null,//图件信息
      faultVersion: ''
    },
    chartFormRules:{
      unit: [{ required: true, message: '请填写制图单位！', trigger: 'blur' }],
      faultVersion:[{required: true, message: '请选择活断层版本！', trigger: 'blur' }]
    },
    addForm: {
      xsemId:null,//事件ID
      longitude:null,//中心点经度
      latitude:null,//中心点纬度
      earthquakeLevel:null,//震级
      dzLonLat:null,//地震经纬度
    },
})
const { queryParams, form, queryParams1, formGroup, rules, rules2, queryParams2,form2,shpDataForm,taskDataForm,sampleDataForm,queryParams3,layerDataTypeList,chartLoading,chartForm,chartFormRules,addForm } = toRefs(data)

function openPoint(){
    isView2.value = false;
    title2.value = '新建抽样点';
    getInfo2();
}
const option = ref([])
/** 获取字典值 */
async function getDictData() {
	await getDict("ldnd").then(response => {
	    option.value = response.data;
	});
}
const drawGeom = ref('')
const layerTypeListAll = ref([])
function chooseProvince(value) {
  layerType.value = ''
  if(value == '') {
    layerTypeVisable.value = false
    layerName.value = ''
    drawGeom.value = ''
  }else{
    layerTypeVisable.value = true
    layerName.value = value.intensity1
    drawGeom.value = value
    debugger
    let taskData = []
    for(let i = 0;i < dataList.value.length;i++) {
      if(dataList.value[i].siId == drawGeom.value.siId) {
        taskData.push(dataList.value[i].geom)
      }
    }
    if(taskData.length == 0) {
      if(drawGeom.value.geom.indexOf('),(') != -1) {
        layerTypeListAll.value = [
          { name: '整图层'},
          { name: '4点分割'},
        ]
      }else{
        layerTypeListAll.value = [
          { name: '整图层'},
          { name: '2点分割',geom: ''},
        ]
      }
    }else{
      layerTypeListAll.value = [
        { name: '剩余图层',geom: taskData},
        { name: '2点分割',geom: taskData},
      ]
    }
  }
  layerTypeMap.value = { name: 'change'} 
}
const layerTypeMap = ref({})
function chooseProvince1(value) {
  debugger
  if(value == '') {
    layerType.value = ''
    layerTypeMap.value = {name: ''} 
  }else{
    layerType.value = value.name
    layerTypeMap.value = value
  }
}
function getInfo2() {
    getPointCreateInfo2({eventCode:currentEvent.value.eventCode}).then(res => {
        form2.value = {};//清空
        open2.value = true;
        proxy.resetForm("addRef2");
        form2.value.samplingPointCode = res.data;//编号
        //抽样点经纬度
        form2.value.longitude = sampleDataForm.value.longitude;
        form2.value.latitude = sampleDataForm.value.latitude;
        form2.value.geom = sampleDataForm.value.geom;
        form2.value.xstmId = sampleDataForm.value.xstmId;//任务id
        form2.value.xsemId = currentEvent.value.id;//地震事件id
        console.log("新建抽样点form2");
        console.log(form2);
    })
}

// 编辑任务
function handleEdit2(id) {
    isView2.value = false;
    title2.value = "修改抽样点";
    detail2(id);
}

// 查看任务
function handleDetail2(id) {
    isView2.value = true;
    title2.value = "查看抽样点";
    detail2(id);
}


// 查看任务
function detail2(id) {
    getDetail2({ id: id }).then(res => {
        open2.value = true;
        proxy.resetForm("addRef2");
        form2.value = res.data;
        if (title.value == '修改抽样点') {
          if(res.data.id==sampleDataForm.value.id){
            //抽样点经纬度
            form2.value.longitude = sampleDataForm.value.longitude;
            form2.value.latitude = sampleDataForm.value.latitude;
            form2.value.geom = sampleDataForm.value.geom;
          }
          console.log("修改抽样点form2");
          console.log(form2);
        }
    })
}

// 保存抽样点
function save2() {
    proxy.$refs["addRef2"].validate(valid => {
        if (valid) {
            let lon = form2.value.longitude;
            let lat = form2.value.latitude;
            form2.value.geom = "POINT("+ lon + " " + lat + ")";//空间数据
            if (title2.value == '新建抽样点') {
                saveData2({ ...form2.value }).then(res => {
                    proxy.$modal.msgSuccess("新建成功");
                    open2.value = false;
                    getList2();
                    getAllDataList2();//获取全部抽样点列表
                })

              clearSelectFeatureBool.value = true;//是否删除选中要素
            } else if (title2.value == '修改抽样点') {
                updateData2({ ...form2.value }).then(res => {
                    proxy.$modal.msgSuccess("保存成功");
                    open2.value = false;
                    getList2();
                    getAllDataList2();//获取全部抽样点列表
                })
            }
            console.log("save2");
            console.log(form2.value);
        }
    })
}



function openTask() {
    isView.value = false;
    title.value = '新建任务';
    getInfo();
}

function getInfo() {
    getTaskCreateInfo({eventCode:currentEvent.value.eventCode}).then(res => {
        open.value = true;
        proxy.resetForm("addRef");
        form.value = res.data;
        //任务范围
        form.value.evaluationSubareaRange = taskDataForm.value.geom;
        form.value.geom = taskDataForm.value.geom;//空间数据
        console.log("新建任务form");
        console.log(form);
    })
}

function selectGroup() {
    if (!isView.value) {
        queryParams1.value = {
            page: 1,
            rows: 10,
        };
        getList1();
    }
}

// 修改任务
function handleEdit(xstmId) {
    isView.value = false;
    title.value = "修改任务";
    detail(xstmId);
}

// 查看任务
function handleDetail(xstmId) {
    isView.value = true;
    title.value = "查看任务";
    detail(xstmId);
}

// 查看任务
function detail(id) {
    getDetail({ id: id }).then(res => {
        open.value = true;
        proxy.resetForm("addRef");
        form.value = res.data;
        if (title.value == '修改任务') {
          if(res.data.xstmId==taskDataForm.value.xstmId){
            //任务范围
            form.value.evaluationSubareaRange = taskDataForm.value.geom;
            form.value.geom = taskDataForm.value.geom;//空间数据
          }
          console.log("修改任务form");
          console.log(form);
        }
    })
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
    multiple.value = !selection.length;
    groupId.value = selection.map((item) => item.xitId);
    groupName.value = selection.map((item) => item.teamName);
};

function queryGroup() {
    form.value.groupName = groupName.value.join(',');
    form.value.groupId = groupId.value.join(',');
    open1.value = false;
}

/** 删除按钮操作 */
function handleDelete(xstmId) {
    proxy.$modal
        .confirm("请确认是否要删除该任务？",)
        .then(function () {
            return del(xstmId);
        })
        .then(() => {
            getList();
            getAllDataList();//获取全部任务列表
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}

/** 删除按钮操作 */
function handleDelete2(id) {
  proxy.$modal
      .confirm("请确认是否要删除选中该抽样点？",)
      .then(function () {
        return del2(id);
      })
      .then(() => {
        getList2();
        getAllDataList2();//获取全部抽样点列表
        proxy.$modal.msgSuccess("删除成功");
      })
      .catch(() => { });
}

/** 查询数据列表--获取任务列表（分页） */
function getList() {
    if (currentEvent.value) {
        loading.value = true;
        //0:新建的评估子区   1:重新划定的评估子区
        getAllList({ ...queryParams.value, xsemId: currentEvent.value.id },"").then(response => {
            dataList.value = response.data.rows ? response.data.rows : [];
            total.value = response.data.total;
            loading.value = false;
            console.log("获取任务列表");
            console.log(dataList.value);
        });
    } else {
        dataList.value = [];
        total.value = 0;
    }
}

/** 查询数据列表--获取全部任务列表 */
function getAllDataList() {
  if (currentEvent.value) {
    loading.value = true;
    //0:新建的评估子区   1:重新划定的评估子区
    getAllTaskDataList({ ...queryParams.value, xsemId: currentEvent.value.id },"").then(response => {
      allDataList.value = response.data;
      loading.value = false;
      console.log("获取全部任务列表");
      console.log(allDataList.value);
    });
  } else {
    allDataList.value = [];
  }
}

/** 查询数据列表--获取小组列表 */
function getList1() {
    if (currentEvent.value) {
        getAllList1({ ...queryParams1.value, xsemId: currentEvent.value.id }).then(response => {
            dataList1.value = response.data.rows ? response.data.rows : [];
            total1.value = response.data.total;
            console.log(response.data);
            open1.value = true;
        });
    } else {
        dataList1.value = [];
        total1.value = 0;
    }
}

/** 查询数据列表--获取抽样点列表（分页） */
function getList2() {
    if (currentEvent.value) {
        loading2.value = true;
        getAllList2({ ...queryParams2.value, xsemId: currentEvent.value.id }).then(response => {
            dataList2.value = response.data.rows ? response.data.rows : [];
            total2.value = response.data.total;
            loading2.value = false;
            console.log("获取抽样点列表");
            console.log(dataList2.value);
        });
    } else {
        dataList2.value = [];
        total2.value = 0;
    }
}

/** 查询数据列表--获取全部抽样点列表 */
function getAllDataList2() {
  if (currentEvent.value) {
    loading2.value = true;
    getAllSamPoiDataList({ ...queryParams2.value, xsemId: currentEvent.value.id }).then(response => {
      allDataList2.value = response.data;
      loading2.value = false;
      console.log("获取全部抽样点列表");
      console.log(allDataList2.value);
    });
  } else {
    allDataList2.value = [];
  }
}

// 查看调查组
function detail1(id) {
    getDetail1({ id: id }).then(res => {
        openGroup.value = true;
        proxy.resetForm("groupRef");
        activeName.value = 'first'
        formGroup.value = res.data;
    })
}

/*地图传参start*/
const pageType = ref("地震烈度图绘制页面");
const mapLoading = ref(false);
const completeRefreshData = ref(false);//防止刷新后地图不显示
//地图对象
const map = ref(null);
const getMap = (obj)=>{
  map.value = obj;
}
const outAndInterRingData = ref([])
const outAndInterRing = (list) => {
  outAndInterRingData.value = list
}
const closePingGu = () => {
  layerType.value = ''
  layerTypeMap.value = {name: ''} 
}
const mapDrawType = ref("");//是否开启地图圈选查询类型（StopDraw关闭地图圈选 Polygon多边形绘制 Circle圆形绘制 Clear清空）
const polygonDrawBool = ref(false);
//全部地图绘制空间数据
const allDrawGeomText = ref("");
//获取全部地图绘制结果
const getAllDrawGeom = (list) =>{
  let geom = "";
  if(list && list.length>0){
    geom = "MULTIPOLYGON(";
    for(let i=0;i<list.length;i++){
      if(i>0){
        geom += ",";
      }
      geom += list[i].split("POLYGON")[1];
    }
    geom += ")";
  }
  console.log("获取全部地图绘制结果");
  console.log(geom);
  if(geom=="MULTIPOLYGON()"){
    geom = "";
  }
  allDrawGeomText.value = geom;//全部地图绘制空间数据
}
//制图地震烈度图绘制
const showDrawSeismicInfluenceBool = ref(false);
const showDrawSeismicInfluence = (bool)=>{
  showDrawSeismicInfluenceBool.value = bool;
  if(bool){
    showButtonType.value = "showDrawSeismicInfluence";
  }else{
    showButtonType.value = "";
  }
}
//各烈度面积总和文字说明
const totalAreaInfo = ref("");
//根据事件ID查询地震烈度图范围列表
function getDrawSeismicInfluenceListByXsemId(){
  let xsemId = currentEvent.value.id;
  getDrawSeismicInfluenceList(xsemId,null).then(res => {
    let list = res.data;
    shpDataForm.value.shpDataList = list;
    if(list && list.length>0){
      let legendList = shpDataForm.value.shpLegendList;
      for(let i=0;i<legendList.length;i++){
        let val = legendList[i].value;
        for(let j=0;j<list.length;j++){
          if(val==list[j].intensity){//烈度
            legendList[i].show = true;//只显示地震烈度图范围的烈度
            break;
          }
        }
      }
      shpDataForm.value.shpLegendList = legendList;
      remark.value = list[0].remark ? list[0].remark : "";//烈度说明
      //获取各烈度面积总和文字说明
      let totalAreaInfoText = "";
      let tempIntensity = null;
      for(let i=(list.length-1);i>=0;i--){
        if(list[i].intensity!=tempIntensity){
          tempIntensity = list[i].intensity;
          let totalArea = list[i].totalArea;//平方米
          if(totalArea!=null){
            totalArea = (totalArea / 1000000).toFixed(2);//保留2位小数
            if(totalAreaInfoText!=""){
              totalAreaInfoText += "，";
            }
            totalAreaInfoText += list[i].intensity1 + "区面积约" + totalArea + "平方公里";
          }
        }
      }
      totalAreaInfo.value = totalAreaInfoText;
      nextTick(() => {
        //获取图例
        getLegendInfo();
      });
    }
  });
}
//根据事件ID删除地震烈度图列表
const deleteDrawSeismicInfluenceByXsemId = ()=>{
  let xsemId = currentEvent.value.id;
  let confirmMsg = "请确认是否删除此地震事件的全部地震烈度图数据？";
  ElMessageBox.confirm(confirmMsg, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  }).then(() => {
    showDrawSeismicInfluence(false);
    mapLoading.value = true;
    deleteDrawSeismicInfluence(xsemId).then(response => {
      proxy.$modal.msgSuccess('删除成功！');
      // mapLoading.value = false;
      // //根据事件ID查询地震烈度图范围列表
      // getDrawSeismicInfluenceListByXsemId();
      //计算全部烈度空间数据及面积不刷新超图
      countAllDrawSeismicInfluenceGeomNotRefresh();
    }).catch(() => {
      mapLoading.value = false;
    });
  }).catch(() => { });
}
//根据事件ID、烈度删除地震烈度图列表
const deleteDrawSeismicInfluenceByXsemIdIntensity = ()=>{
  let xsemId = currentEvent.value.id;
  let intensity = drawInfluenceIntensity.value;
  //获取烈度文字
  let intensityStr = getIntensityStr(intensity);
  let confirmMsg = "请确认是否删除此地震事件的烈度"+intensityStr+"的地震烈度图数据？";
  ElMessageBox.confirm(confirmMsg, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  }).then(() => {
    showDrawSeismicInfluence(false);
    mapLoading.value = true;
    deleteDrawSeismicInfluenceByIntensity(xsemId,intensity).then(response => {
      proxy.$modal.msgSuccess('删除成功！');
      // mapLoading.value = false;
      // //根据事件ID查询地震烈度图范围列表
      // getDrawSeismicInfluenceListByXsemId();
      //计算全部烈度空间数据及面积不刷新超图
      countAllDrawSeismicInfluenceGeomNotRefresh();
    }).catch(() => {
      mapLoading.value = false;
    });
  }).catch(() => { });
}
//计算全部烈度空间数据及面积并刷新超图（地震烈度图绘制页面）
const countAllDrawSeismicInfluenceGeomRefresh =()=>{
  let xsemId = currentEvent.value.id;
  let confirmMsg = "请确认是否计算并发布此地震事件的全部地震烈度图数据？";
  ElMessageBox.confirm(confirmMsg, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  }).then(() => {
    showDrawSeismicInfluence(false);
    mapLoading.value = true;
    countAllDrawSeismicInfluenceGeom(xsemId,true).then(response => {
      proxy.$modal.msgSuccess('计算发布成功！');
      mapLoading.value = false;
      //根据事件ID查询地震烈度图范围列表
      getDrawSeismicInfluenceListByXsemId();
    }).catch(() => {
      mapLoading.value = false;
    });
  }).catch(() => { });
}

//计算全部烈度空间数据及面积不刷新超图
const countAllDrawSeismicInfluenceGeomNotRefresh =()=>{
  let xsemId = currentEvent.value.id;
  countAllDrawSeismicInfluenceGeom(xsemId,false).then(response => {
    proxy.$modal.msgSuccess('计算成功！');
    mapLoading.value = false;
    //根据事件ID查询地震烈度图范围列表
    getDrawSeismicInfluenceListByXsemId();
  }).catch(() => {
    mapLoading.value = false;
  });
}

//开始绘制地震烈度图
const startDrawSeismicInfluence = ()=>{
  let intensity = drawInfluenceIntensity.value;
  //获取烈度文字
  let intensityStr = getIntensityStr(intensity);
  let confirmMsg = "请确认是否绘制烈度"+intensityStr+"的地震烈度图？";
  ElMessageBox.confirm(confirmMsg, "系统提示", {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: "warning",
  }).then(() => {
    showDrawSeismicInfluence(false);
    mapLoading.value = false;
    mapDrawType.value = "BezierSplinePolygon" + intensity;//开始绘制贝塞尔曲线面
  }).catch(() => { });
}
//全部地图绘制空间数据
const drawInfluenceIntensity = ref("11");//绘制地震影响场烈度6-11
//获取烈度文字
function getIntensityStr(intensity){
  let intensityStr = "";
  if(intensity=="11"){
    intensityStr = "Ⅺ度（11度）";
  }else if(intensity=="10"){
    intensityStr = "Ⅹ度（10度）";
  }else if(intensity=="9"){
    intensityStr = "Ⅸ度（9度）";
  }else if(intensity=="8"){
    intensityStr = "Ⅷ度（8度）";
  }else if(intensity=="7"){
    intensityStr = "Ⅶ度（7度）";
  }else if(intensity=="6"){
    intensityStr = "Ⅵ度（6度）";
  }

  return intensityStr;
}
//获取绘制地震烈度图
const getDrawInfluence = (obj) =>{
  mapDrawType.value = "StopDrawBezierSplinePolygon";//停止绘制贝塞尔曲线面
  console.log("获取绘制地震烈度图");
  console.log(obj);
  if(obj!=null){
    let geom = "";
    let intensity = obj.intensity;
    if(intensity==null){
      intensity = drawInfluenceIntensity.value;
    }
    //获取烈度文字
    let intensityStr = getIntensityStr(intensity);
    let list = obj.list;
    let coords = obj.coords;//绘制贝塞尔曲线多边形经纬度
    let siId = obj.siId;//ID
    if(list!=null && list.length>0) {
      let xsemId = currentEvent.value.id;
      let confirmMsg = "请确认是否保存烈度" + intensityStr + "的地震烈度图？";
      ElMessageBox.confirm(confirmMsg, "系统提示", {
        confirmButtonText: '保存',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        mapDrawType.value = "Clear";
        mapLoading.value = true;
        geom = "POLYGON((";
        for(let i=0;i<list.length;i++){
          if(i>0){
            geom += ",";
          }
          geom += list[i][0] + " " + list[i][1];
        }
        geom += "))";
        let coordsStr = "";
        for(let i=0;i<coords.length;i++){
          if(coordsStr!=""){
            coordsStr += ",";
          }
          coordsStr += coords[i][0] + " " + coords[i][1];
        }
        //保存
        saveDrawSeismicInfluenceByIntensity(siId,xsemId,intensity,geom,remark.value,coordsStr).then(res => {
          if (res.code == 200 && res.data) {
            let msg = res.data;
            if(msg=="保存成功"){
              proxy.$modal.alertSuccess('保存成功！');
            }else{
              proxy.$modal.alertWarning('不能交叉重叠，应按照烈度从小到大的包含关系绘制！'+msg);
            }
            mapDrawType.value = 'clearBezierSplinePolygon';//清空绘制贝塞尔曲线面
            //根据事件ID查询地震烈度图范围列表
            getDrawSeismicInfluenceListByXsemId();
          }
          mapLoading.value = false;
        }).catch(() => {
          mapLoading.value = false;
        });
      }).catch(() => {});
    }
  }
}
//删除所选地震烈度图
const deleteDrawInfluence =(siId)=>{
  if(siId!=undefined || siId!=null){
    let confirmMsg = "请确认是否删除所选地震烈度图数据？";
    ElMessageBox.confirm(confirmMsg, "系统提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: "warning",
    }).then(() => {
      mapLoading.value = true;
      deleteDrawSeismicInfluenceById(siId).then(response => {
        proxy.$modal.msgSuccess('删除成功！');
        // mapLoading.value = false;
        // //根据事件ID查询地震烈度图范围列表
        // getDrawSeismicInfluenceListByXsemId();
        //计算全部烈度空间数据及面积不刷新超图
        countAllDrawSeismicInfluenceGeomNotRefresh();
      }).catch(() => {
        mapLoading.value = false;
      });
    }).catch(() => { });
  }
}
const legendInfo = ref("");
//获取图例
function getLegendInfo(){
  let html = "";
  let legendList = shpDataForm.value.shpLegendList;
  for(let i=0;i<legendList.length;i++){
    if(legendList[i].show){
      html += '<div style="position: relative;height: 16px;line-height: 16px;font-size: 16px;margin-top: 8px;">' +
          '<div style="position: relative;top: 4px;left: 0px;width: 16px;height: 16px;margin-right: 10px;display: inline-block;">' +
          '<div style="position: relative;left: 0px;top: 0px;height: 16px;border:1px solid black;border-color:rgb(152,152,152);background-color:'+legendList[i].color+';"></div>' +
          '</div>' +
          '<span>'+legendList[i].fullName+'</span>' +
          '</div>';
    }
  }
  if(html!=""){
    html = '<div style="position: relative;height: 20px;line-height: 16px;font-size: 16px;margin-top: 8px;text-align: center;">' +
        '<span style="line-height: 16px;font-size: 16px;font-weight: bold;">地震烈度图范围烈度</span>' +
        '</div>' + html;
  }
  //地震震中
  html += '<div style="position: relative;height: 16px;line-height: 16px;font-size: 16px;margin-top: 8px;">' +
      '<div style="position: relative;top: 6px;left: 0px;width: 16px;height: 16px;margin-right: 10px;display: inline-block;">' +
      '<div style="position: relative;left: 3px;top: 0px;width: 10px;height: 10px;border-radius:5px;border:1px solid red;background-color:yellow;"></div>' +
      '</div>' +
      '<span>震中</span>' +
      '</div>';
  if(isCheckBox2.value){
    html += '<div style="position: relative;height: 30px;line-height: 30px;font-size: 16px;margin-top: 8px;">' +
        '<div style="position: relative;top: 6px;left: 0px;width: 30px;height: 30px;margin-right: 10px;display: inline-block;">' +
        '<div style="position: relative;left: 0px;top: 0px;width: 25px;height: 25px;border-radius: 15px;border-color: rgb(152, 152, 152);background-color: rgb(222, 1, 2);font-size: 13px;padding-left: 4px;">' +
        '8.7</div>' +
        '</div>' +
        '<span style="position:relative;top:5px;">仪器烈度</span>' +
        '</div>';
  }
  if(isCheckBox3.value){
    html += '<div style="position: relative;height: 16px;line-height: 16px;font-size: 16px;margin-top: 8px;">' +
        '<div style="position: relative;top: 6px;left: 0px;width: 16px;height: 16px;margin-right: 10px;display: inline-block;">' +
        '<div style="position: relative;left: 3px;top: 0px;width: 10px;height: 10px;border-radius:5px;border-color:rgb(152,152,152);background-color:blue;"></div>' +
        '</div>' +
        '<span>抽样点烈度</span>' +
        '</div>';
  }
  if(isCheckBox6.value){
    html += '<div style="position: relative;height: 16px;line-height: 16px;font-size: 16px;margin-top: 8px;">' +
        '<div style="position: relative;top: 6px;left: 0px;width: 16px;height: 16px;margin-right: 10px;display: inline-block;">' +
        '<div style="position: relative;left: 3px;top: 0px;width: 10px;height: 10px;border-radius:5px;border-color:rgb(152,152,152);background-color:rgba(0,255,0,0.7);"></div>' +
        '</div>' +
        '<span>余震序列</span>' +
        '</div>';
  }
  legendInfo.value = html;
}

const showFileUploadBool = ref(false);//是否显示上传文件组件
//导入地震影响场
const seismicInfluenceUpload = (val)=>{
  showFileUploadBool.value = val;
  console.log(showFileUploadBool.value,'打开');
}
const showButtonType = ref("");//显示|隐藏按钮类型
const remark = ref("");//烈度说明
const showRemarkBool = ref(false);//是否显示烈度说明
//显示烈度说明
const showRemark = (val)=>{
  showRemarkBool.value = val;
  showButtonType.value = "showRemark";
}
//关闭烈度说明
const closeRemark =()=>{
  showRemarkBool.value = false;
  showButtonType.value = "";
}
//保存烈度说明
const saveRemark = ()=>{
  let xsemId = currentEvent.value.id;
  updateRemark({xsemId:xsemId,remark:remark.value}).then(res=>{
    console.log(res);
    closeRemark();
    proxy.$modal.msgSuccess("保存成功");
  });
}
const showPrintImageBool = ref(false);//是否显示生成图件
//显示生成图件
const showPrintImage = (val)=>{
  if (currentEvent.value && currentEvent.value.id) {
    getPrintImage();//查看图件
    showPrintImageBool.value = val;
    showButtonType.value = "showPrintImage";
  }else{
    proxy.$modal.msgWarning("请在地震事件管理中设置当前地震事件");
  }
}
//关闭生成图件
const closePrintImage =()=>{
  showPrintImageBool.value = false;
  showButtonType.value = "";
}
//显示数据选择面板
const showSelectDialog = () =>{
  openVersionDialog.value = true;
}
const closeDialog = (val)=>{
  if(val){
    openVersionDialog.value = false;
  }
}
//生成图件/重新生成图件
const savePrintImage = ()=>{
  proxy.$refs['chartFormRef'].validate((valid, fields) => {
    if (valid) {
      ElMessageBox.confirm(`所选事件如已生成相应图件将被覆盖，请确认是否继续。`, "系统提示", {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: "warning",
      }).then(() => {
        const chartFormLoading = ElLoading.service({
          lock: true,
          text: '正在出图中...',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        let xsemId = currentEvent.value.id;
        supergraph({...chartForm.value,xsemId:xsemId,summaryText:remark.value}).then(res=>{
          if (res.code == 200 && res.data) {
            proxy.$modal.alertSuccess('出图成功！')
            getPrintImage();//查看图件
          } else {
            res.message && proxy.$modal.alertError(res.message);
          }
          chartFormLoading.close()
        }).catch(err => chartFormLoading.close())
      }).catch(() => { })
    } else {
      proxy.$refs['chartFormRef'].scrollToField(Object.keys(fields)[0])
    }
  })
}

//查看图件
const getPrintImage = ()=>{
  chartForm.value.attachList = [];
  let xsemId = currentEvent.value.id;
  getByLabel({xsemId:xsemId,mapLabel:"0"}).then(res=>{
    console.log(res);
    if(res.data){
      chartForm.value.mapManagement = res.data;
      chartForm.value.unit = res.data.unit;
      let attachId = res.data.attachId;
      let name = "supermap-webprinting-report.png";
      let url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadImageFile?attachId=" + encodeURIComponent(attachId) || '';
      chartForm.value.attachList.push({ attachId: attachId || '', name: name || '', url: url });
      console.log(chartForm.value.attachList)
    }
  });
}
//下载图件
function uploadImg() {
  if(chartForm.value.attachList.length>0){
    saveAs(chartForm.value.attachList[0].url, '图件')
  }
}
//修改图件信息
const updateImageInfo = ()=>{
  updateMapManagement({...chartForm.value.mapManagement}).then(res=>{
    console.log(res);
    proxy.$modal.msgSuccess("保存成功");
  });
}
const layerSelectViable = ref(false)
//开启烈度选择框
const openLayerSelect = (val) => {
  layerSelectViable.value = val
}
//关闭上传文件窗口
const closeUpload = ()=>{
  console.log('导入');
  showFileUploadBool.value = false;
}
// 确认上传数据文件
function uploadFile(value) {
  proxy.$modal.msgSuccess("导入成功");
  //数据列表
  if (value.dataList) {
    shpDataForm.value.shpDataList = value.dataList;
  } else {
    shpDataForm.value.shpDataList = [];
  }
  //文件列表
  if (value.fileList) {
    let arr = [];
    value.fileList.forEach(item => {
      arr.push(item.attachId)
    })
    shpDataForm.value.dataFileIds = arr.join(',');
  } else {
    shpDataForm.value.dataFileIds = '';
  }
}
const clearSelectFeatureBool = ref(false);//是否删除选中要素
//新建任务|修改任务
const createTaskArea = (obj)=>{
  clearSelectFeatureBool.value = false;//是否删除选中要素
  let xstmId = obj.xstmId;
  taskDataForm.value.xstmId = xstmId;
  if(obj.type=="保存"){
    if(obj.geom){
      taskDataForm.value.geom = obj.geom;
      //根据事件ID、空间数据查询地震烈度图范围列表
      getSeismicInfluenceArray(obj.geom);
    }else{
      taskDataForm.value.geom = "";
    }
  }else if(obj.type=="查看"){
    if(xstmId){
      // 查看任务
      handleDetail(xstmId);
    }
  }else if(obj.type=="删除"){
    if(xstmId){
      // 删除任务
      handleDelete(xstmId);
    }
  }
}
//新建抽样点
const createSamplePoint = (obj)=>{
  clearSelectFeatureBool.value = false;//是否删除选中要素
  let id = obj.id;
  sampleDataForm.value.id = id;
  if(obj.type=="保存"){
    if(obj.lon && obj.lat){
      sampleDataForm.value.longitude = obj.lon;
      sampleDataForm.value.latitude = obj.lat;
      let geom = "POINT("+ obj.lon + " " + obj.lat + ")";//空间数据
      sampleDataForm.value.geom = geom;
      //根据事件ID、空间数据查询任务列表
      getSurTaskManageArray(geom);
    }else{
      sampleDataForm.value.longitude = "";
      sampleDataForm.value.latitude = "";
      sampleDataForm.value.geom = "";
    }
  }else if(obj.type=="查看"){
    if(id){
      // 查看抽样点
      handleDetail2(id);
    }
  }else if(obj.type=="删除"){
    if(id){
      // 删除抽样点
      handleDelete2(id);
    }
  }
}
//类型disasterArea,事件ID
const typeCode = ref("");
//根据事件ID查询地震烈度图范围列表
function getSeismicInfluenceArray(geom){
  console.log(currentEvent.value);
  if (currentEvent.value) {
    let xsemId = currentEvent.value.id;
    //类型drawSiArea,事件ID
    typeCode.value = "drawSiArea,"+xsemId;
    getDrawSeismicInfluenceList(xsemId,geom).then(response => {
      console.log("根据事件ID查询地震烈度图范围列表");
      console.log(response.data);
      let list = response.data;
      if(geom){//新建|修改任务前查询空间范围是否在地震烈度图范围内
        // if(list && list.length>0){
        //   if(list.length==1){//符合任务范围应在1个地震烈度图范围烈度内
        //     let xstmId = taskDataForm.value.xstmId;
        //     if(xstmId){
        //       //修改任务
        //       handleEdit(xstmId);
        //     }else{
              //新建任务
              openTask();
        //     }
        //   }else{
        //     proxy.$modal.msgWarning("任务范围应在1个地震烈度图范围烈度内，请修改任务区域");
        //   }
        // }else{
        //   proxy.$modal.msgWarning("任务范围应在1个地震烈度图范围烈度内，请修改任务区域");
        // }
      }else{//初始化查询地震烈度图范围
        shpDataForm.value.shpDataList = list;
        liduJiBieData.value = list
        if(list && list.length>0){
          let legendList = shpDataForm.value.shpLegendList;
          for(let i=0;i<legendList.length;i++){
            let val = legendList[i].value;
            for(let j=0;j<list.length;j++){
              if(val==list[j].intensity){//烈度
                legendList[i].show = true;//只显示地震烈度图范围的烈度
                break;
              }
            }
          }
          shpDataForm.value.shpLegendList = legendList;
          remark.value = list[0].remark ? list[0].remark : "";//烈度说明
          //获取各烈度面积总和文字说明
          let totalAreaInfoText = "";
          let tempIntensity = null;
          for(let i=(list.length-1);i>=0;i--){
            if(list[i].intensity!=tempIntensity){
              tempIntensity = list[i].intensity;
              let totalArea = list[i].totalArea;//平方米
              if(totalArea!=null){
                totalArea = (totalArea / 1000000).toFixed(2);//保留2位小数
                if(totalAreaInfoText!=""){
                  totalAreaInfoText += "，";
                }
                totalAreaInfoText += list[i].intensity1 + "区面积约" + totalArea + "平方公里";
              }
            }
          }
          totalAreaInfo.value = totalAreaInfoText;
          nextTick(() => {
            //获取图例
            getLegendInfo();
            //加载震中图层
            // getEarthquakeCenterLayer(true);
          });
        }
      }
    });
  }else{
    shpDataForm.value.shpDataList = [];
  }
}
//根据事件ID、空间数据查询任务列表
function getSurTaskManageArray(geom){
  if (currentEvent.value && geom) {
    let xsemId = currentEvent.value.id;
    getSurTaskManageList(xsemId,geom).then(response => {
      console.log("根据事件ID、空间数据查询任务列表");
      console.log(response.data);
      let list = response.data;
      //新建|修改抽样点前查询抽样点是否在1个任务区域内
      if(list && list.length>0){
        if(list.length==1){//符合抽样点应在1个任务区域内
          let xstmId = list[0].xstmId;//任务ID
          sampleDataForm.value.xstmId = xstmId;//任务id
          let id = sampleDataForm.value.id;//抽样点ID
          if(id){
            //修改抽样点
            handleEdit2(id);
          }else{
            //新建抽样点
            openPoint();
          }
        }else{
          proxy.$modal.msgWarning("抽样点应在1个任务区域内，请修改抽样点");
        }
      }else{
        proxy.$modal.msgWarning("抽样点应在1个任务区域内，请修改抽样点");
      }
    });
  }
}
/*地图传参end*/

function showFastSiVersionDialog(){
  showFastSiVersionTableBool.value = true;
  // 根据事件ID查询地震影响场版本信息列表
  getFastSiVersionList();
}

// 根据事件ID查询地震影响场版本信息列表
function getFastSiVersionList(){
  let xsemId = currentEvent.value.id;
  if(xsemId){
    tableLoading.value = true;
    getFastSiVersionListByXsemId({xsemId,...queryParams3.value}).then(res=>{
      fastSiVersionList.value = res.data.rows ? res.data.rows : [];
      total3.value = res.data.total;
      tableLoading.value = false;
    })
  }
}

//选择快速影响场版本
const selectionData = ref({});
const selectRadio = ref('');

//单选选择
function getCurrentRow(row) {
  if (selectRadio.value) {
    if (selectRadio.value == row.fvId) {
      selectRadio.value = ''
      selectionData.value = {};// 取消勾选就把回传数据清除
      return;
    }
  }
  selectRadio.value = row.fvId;
  selectionData.value = row;
}

const submitAftershockSequence = () => {
  if(dataRange.value != '' && dataRange.value != null) {
    getAftershockSequenceData({startTime: dataRange.value}).then(res => {
      aftershockList.value = res.data
      aftershockSequenceBool.value = false
      setTimeout(() => {
        isCheckBox6.value = true
        nextTick(() => {
          //获取图例
          getLegendInfo();
        });
      },300)
    }).catch(erro => {

    })
  }else{
    proxy.$modal.msgWarning('请选择时间范围!')
  }
}
function aftershockSequenceFun(){
  isCheckBox6.value = false
}
//确定选择快速影响场版本
const submitVersionSelect = ()=>{
  if (selectRadio.value) {
    showFastSiVersionTableBool.value = false;
    let fvId = selectRadio.value;
    // 根据版本ID查询地震影响场空间数据列表
    getFastSeismicInfluenceList(fvId);
    isCheckBox1.value = true;
  }else{
    fastSeismicInfluenceList.value = [];
    isCheckBox1.value = false;
    proxy.$modal.msgWarning("请选取版本");
  }
}

//快速影响场勾选事件
const checkBoxEvent1 = (val)=>{
  if(val){
    //确定选择快速影响场版本
    submitVersionSelect();
  }else{
    fastSeismicInfluenceList.value = [];
  }
}
const instrumentIntensityList = ref([])
//仪器烈度勾选事件
const checkBoxEvent2 = (val)=>{
  if(val){
    let xsemId = currentEvent.value.id;
    if(xsemId){
      let type = "0";//0:新建的评估子区   1:重新划定的评估子区
      //根据事件ID、类型查询抽样点房屋列表
      getInstrumentIntensityList({xsemId: xsemId}).then(res=>{
        instrumentIntensityList.value = res.data ? res.data : [];
      });
    }
  }else{
    instrumentIntensityList.value = [];
  }
  nextTick(() => {
    //获取图例
    getLegendInfo();
  });
}
//调查数据抽样点房屋数据列表
const samPoiHouDataList = ref([]);
//调查数据拟定烈度勾选事件
const checkBoxEvent3 = (val)=>{
  if(val){
    let xsemId = currentEvent.value.id;
    if(xsemId){
      // let type = "";//0:新建的评估子区   1:重新划定的评估子区
      //根据事件ID、类型查询抽样点房屋列表
      getSamPoiHouDataByXsemIdAndType(xsemId).then(res=>{
        samPoiHouDataList.value = res.data ? res.data : [];
      });
    }
  }else{
    samPoiHouDataList.value = [];
  }
  nextTick(() => {
    //获取图例
    getLegendInfo();
  });
}
/*//补充调查数据抽样点房屋数据（补充调查的点）列表
const samPoiHouDataList1 = ref([]);
//补充调查数据拟定烈度勾选事件
const checkBoxEvent4 = (val)=>{
  if(val){
    let xsemId = currentEvent.value.id;
    if(xsemId){
      let type = "";//0:新建的评估子区   1:重新划定的评估子区
      //根据事件ID、类型查询抽样点房屋列表
      getSamPoiHouDataByXsemIdAndType(xsemId,type).then(res=>{
        samPoiHouDataList1.value = res.data ? res.data : [];
      });
    }
  }else{
    samPoiHouDataList1.value = [];
  }
  nextTick(() => {
    //获取图例
    getLegendInfo();
  });
}*/

//地震影响场空间数据列表
const fastSeismicInfluenceList = ref([]);
// 根据版本ID查询地震影响场空间数据列表
function getFastSeismicInfluenceList(fvId){
  getFastSeismicInfluenceListByFvId(fvId,"").then(res=>{
    let data = res.data;
    console.log(data);
    fastSeismicInfluenceList.value = data;
  })
}

//断层分布
const checkBoxEvent5 = (bool)=>{
  versionDialogType.value = "断层";
  openVersionDialog.value = bool;
  if(bool==false){
    //设置数据版本
    removeLayerVersion("dc");//断层
  }
}

//余震序列
const aftershockList = ref([]);
const checkBoxEvent6 = (bool)=>{
  if(bool){
    aftershockSequenceBool.value = true
  }else{
    aftershockList.value = [];
  }
}

//房屋基础信息
const checkBoxEvent7 = (bool)=>{
  if(bool){
    //设置数据版本
    let list = layerDataTypeList.value;
    list[2].versionCode = "全部";
    list[2].show = true;
    console.log(list);
    layerDataTypeList.value = list;
  }else{
    //设置数据版本
    removeLayerVersion("fwjcxx13");
  }
}

//DEM数据
const checkBoxEvent8 = (bool)=>{
  versionDialogType.value = "高程数据";
  openVersionDialog.value = bool;
  if(bool==false){
    //设置数据版本
    removeLayerVersion("demgcsj");
  }
}

//遥感信息
const checkBoxEvent9 = (bool)=>{
  if(bool){

  }else{

  }
}

//加载震中图层
const getEarthquakeCenterLayer = (bool)=>{
  if(bool){
    let xsemId = currentEvent.value.id;
    //设置数据版本
    let list = layerDataTypeList.value;
    list[3].versionCode = "xsem_id='"+xsemId+"' and del_flag='0'";
    list[3].show = true;
    layerDataTypeList.value = list;
  }else{
    //设置数据版本
    removeLayerVersion("sddzzzsj");
  }
}

const resetClearAllBool = ref(false);//是否清空全部超图图层
//点击地图经纬度
const clickLonLat = ref([]);
//传递点击地图经纬度
const getClickLonLat = (lonlat) =>{
  clickLonLat.value = lonlat;
}
//版本选择类型
const versionDialogType = ref("断层");
//是否显示版本选择
const openVersionDialog = ref(false);//版本选择面板
const closeVersionDialog = ()=>{
  openVersionDialog.value = false;
}
//版本选择结果
const selectVersionData = (obj)=>{
  if(obj){
    let versionCode = obj.versionCode;
    chartForm.value.faultVersion = versionCode
    if(obj.type=="断层"){
      //设置数据版本
      setLayerVersion("dc",versionCode);
    }else if(obj.type=="高程数据"){
      //设置数据版本
      let list = layerDataTypeList.value;
      list[1].tifFileName = obj.attachName;//tif文件名称
      list[1].versionCode = versionCode;
      list[1].show = true;
      list[1].tifFilePath = obj.filePath;//tif文件路径
      console.log(list);
      layerDataTypeList.value = list;
    }
  }
}

//设置图层数据版本
function setLayerVersion(type,version){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].versionCode = version;
      list[i].show = true;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//移除图层数据版本
function removeLayerVersion(type,version){
  let list = layerDataTypeList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].level3DataType==type){
      list[i].show = false;
      break;
    }
  }
  console.log(list);
  layerDataTypeList.value = list;
}

//导出
function exportFile(){
 /* <el-checkbox v-model="isCheckBox3" label="抽样点烈度" size="large" @change="checkBoxEvent3" />
  <el-checkbox v-model="isCheckBox4" label="补充调查抽样点烈度" size="large" @change="checkBoxEvent4" />
  <el-checkbox v-model="isCheckBox2" label="仪器烈度" size="large" @change="checkBoxEvent2" />
  <el-checkbox v-model="isCheckBox5" label="断层分布" size="large" @change="checkBoxEvent5" />
  <el-checkbox v-model="isCheckBox6" label="余震序列" size="large" @change="checkBoxEvent6" />
  <el-checkbox v-model="isCheckBox7" label="房屋基础信息" size="large" @change="checkBoxEvent7" />
  <el-checkbox v-model="isCheckBox8" label="DEM数据" size="large" @change="checkBoxEvent8" />
  <el-checkbox v-model="isCheckBox9" label="遥感信息" size="large" @change="checkBoxEvent9" />*/
  let bool = false;
  let xsemId = currentEvent.value.id;
  let list = layerDataTypeList.value;
  if(isCheckBox2.value){
    //仪器烈度
    bool = true;
    let sqlFilter = "1=1";//全部
    //根据sql导出shp文件并下载zip
    downloadShpFileBySql("仪器烈度","xczh_instrument_intensity",sqlFilter);
  }
  if(isCheckBox3.value){//抽样点烈度
    bool = true;
    let sqlFilter = "xsem_id='"+xsemId+"' and check_status !='0' and del_flag='0'";//type 0:新建 1:划定
    //根据sql导出shp文件并下载zip
    downloadShpFileBySql("抽样点烈度","xczh_sampling_point_house_data",sqlFilter);
  }
  // if(isCheckBox4.value){//补充调查抽样点烈度
  //   bool = true;
  //   let sqlFilter = "xsem_id='"+xsemId+"' and type='1' and del_flag='0'";//type 0:新建 1:划定
  //   //根据sql导出shp文件并下载zip
  //   downloadShpFileBySql("补充调查抽样点烈度","xczh_sampling_point_house_data",sqlFilter);
  // }
  if(isCheckBox5.value){//断层
    if(list[0].show){
      let versionCode = list[0].versionCode;
      let sqlFilter = "data_version='"+versionCode+"' and del_flag='0'";
      //根据sql导出shp文件并下载zip
      downloadShpFileBySql("断层","jc_fault",sqlFilter);
    }
  }
  if(isCheckBox6.value){
    //余震序列
  }
  if(isCheckBox8.value){//DEM数据
    if(list[1].show){
      /*let tifFileName = list[1].tifFileName;//tif文件名称
      if(tifFileName){
        bool = true;
        //下载tif文件
        downloadTifFile(tifFileName);
      }*/
      let tifFileName = list[1].tifFileName;//tif文件名称
      let tifFilePath = list[1].tifFilePath;//tif文件路径
      if(tifFilePath){
        bool = true;
        //下载tif文件
        downloadTifFile(tifFileName,tifFilePath);
      }
    }
  }
  if(isCheckBox9.value){
    //遥感信息
  }
  if(isCheckBox10.value){//地震烈度图
    bool = true;
    let sqlFilter = "xsem_id='"+xsemId+"' and del_flag='0'";
    //根据sql导出shp文件并下载zip
    downloadShpFileBySql("地震烈度图","xzch_draw_seismic_influence",sqlFilter);
  }
  if(bool==false){
    proxy.$modal.msgWarning("请勾选数据进行下载!");
  }
}

/*//下载tif文件
function downloadTifFile(tifFileName){
  //下载文件
  let fileName = tifFileName + ".tif";
  proxy.download("/intensity/downloadTifFile", {
    tifFileName:tifFileName
  }, fileName);
}*/

//下载tif文件
function downloadTifFile(tifFileName,tifFilePath){
  //下载文件
  let fileName = tifFileName + ".tif";
  proxy.download("/intensity/downloadTifFile", {
    tifFilePath:tifFilePath
  }, fileName);
}

//根据sql导出shp文件并下载zip
function downloadShpFileBySql(name,dataset,sqlFilter){
  //下载文件
  let fileName = name + ".zip";
  proxy.download("/intensity/downloadShpFileBySql", {
    dataset:dataset,sqlFilter:sqlFilter
  }, fileName);
}

//初始化
function initFunction(){
  if(completeRefreshData.value){
    // getAllDataList();//获取全部任务列表
    // getAllDataList2();//获取全部抽样点列表
    // getList();//获取任务列表（分页）
    // getList2();//获取抽样点列表（分页）
    //根据事件ID查询地震烈度图范围列表
    getSeismicInfluenceArray("");
    getDictData();
  }
}

//获取当前事件
watch(() => currentEvent.value, val => {
  console.log("获取当前事件0");
  if(val && val.id){
    console.log("获取当前事件");
    getSeismicEventsDetail({ id: val.id }).then(res => {
      let data = res.data;
      console.log(data);
      if(data){
        addForm.value.xsemId = data.xsemId;//事件ID
        addForm.value.earthquakeLevel = Number(data.magnitude);//震级
        addForm.value.longitude = data.longitude;//经度
        addForm.value.latitude = data.latitude;//纬度
        addForm.value.dzLonLat = [data.longitude,data.latitude];//地震经纬度
      }
    })
  }
},{ deep: true, immediate: true });

//1秒计时器判断是否获取地震事件
function getCurrentEvent(count){
  return new Promise(function (resolve, reject) {
    if(currentEvent.value==null){
      setTimeout(function () {
        count++;
        resolve(count);
      }, 500);
    }else{
      resolve(count);
    }
  });
}

//获取地震事件并初始化
function getCurrentEventInit(count){
  getCurrentEvent(count).then(function (res) {
    if(currentEvent.value==null){
      if(res<5){//5秒内获取地震事件
        console.log("count++"+res)
        getCurrentEventInit(res);
      }else{
        proxy.$modal.msgWarning("请在地震事件管理中设置当前地震事件");
      }
    }else{
      initFunction();//初始化
    }
  });
}

onMounted(() => {
  completeRefreshData.value = true;
  //获取地震事件并初始化
  getCurrentEventInit(0);
})
</script>
  
<style scoped lang="scss">
.title {
    margin: 0 0 20px !important;
}

.mapDiv {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

.currentEventDiv {
  position:absolute;top:20px;right:20px;background:rgba(255,255,255,0.8);
  border:1px solid gray;
  padding-bottom: 1px;
  width:400px;
  // height:50px;
}
.liduJiBie {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
  z-index: 10;
}
/*地震烈度图范围图层图例*/
.new-legendDiv {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
  display:none;
}
.new-legendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-legendDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-legendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}
.new-legendDiv-polygon {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border:1px solid black;
  background:#fff;
}
.new-legendDiv-point {
  position: relative !important;
  left: 10px !important;
  top: 0px !important;
  border-radius:5px;
  background:#fff;
  width: 10px !important;
  height: 10px !important;
}
.new-checkBoxDiv {
  p {
    height:30px;
  }
}
// ::v-deep .el-collapse-item__content {
//   height: 170px;
//   padding-left: 15px;
// }
:deep(.el-collapse-item__content) {
  height: 180px;
  padding-left: 15px;
}
:deep(.el-collapse-item__header){
  padding: 0 10px;
}
.mt15 {
  margin-top: 15px;
}
.chartForm {
  padding:10px;
}
// :deep(.el-form-item) {
//   width:43%
// }
.new-settingDiv-span {
  float: right;
  line-height: 32px;
  cursor:pointer;
}
.new-settingDiv-span:hover {
  cursor:pointer;
}
</style>
  
  